import React, { Component } from "react";
import ReactDOM from "react-dom";
import Button from "./Button";
import $ from "jquery";
import md5 from "crypto-js/md5";
import { connect } from "react-redux";
import { login, toLogin } from "../action/counter.js";
import { browserHistory } from 'react-router';
import { setcookie, getcookie, delcookie } from "./cookie";
import Phone from './Phone'
class Main extends Component {
  componentWillUnmount() {
    this.props.toLogin(0);
  }
  componentDidMount() {
    var cj = 1;
    var wHeight = $(window).height();
    $("body").css("overflow", "hidden");
    $(".main").css({ marginTop: -wHeight * 0.065 });
    if (this.props.tologin == 1) {
      cj = 3;
      console.log(1);
      $(".main").css({ marginTop: -wHeight * 2 - wHeight * 0.065 * 3 });
      $(".third_action").css({ opacity: 1, top: "0px" });
    }
    $(".firstMain,.secondMain").height(wHeight + wHeight * 0.09);
    $(".thiredMain").height(wHeight - wHeight * 0.065);
    $(window).on("resize", function() {
      var wHeight = $(window).height();
      $(".firstMain,.secondMain,.thiredMain").height(wHeight + wHeight * 0.065);
      $(".thiredMain").height(wHeight - wHeight * 0.065);
      // $('.first_action')
    });

    // 页面滚动效果

    $(window).bind("mousewheel", function(event) {
      if (event.originalEvent.wheelDelta < 0) {
        cj > 3 ? (cj = 4) : cj++;
      } else {
        cj < 2 ? (cj = 1) : cj--;
      }
      switch (cj) {
        case 1:
          $(".first_action")
            .stop(true)
            .animate({ opacity: 1 }, 3500);
          $(".main")
            .stop(true)
            .animate({ marginTop: -wHeight * 0.065 }, 1500);
          $(".second_action")
            .stop(true)
            .animate({ opacity: 0, top: "-20px" }, 200);
          break;
        case 2:
          $(".first_action")
            .stop(true)
            .animate({ opacity: 0 }, 200);
          $(".main")
            .stop(true)
            .animate({ marginTop: -wHeight - wHeight * 0.065 * 2 }, 1500);
          $(".second_action")
            .stop(true)
            .animate({ opacity: 1, top: "0" }, 2000);
          $(".third_action")
            .stop(true)
            .animate({ opacity: 0, top: "-200px" }, 1200);
          break;
        case 3:
          $(".second_action")
            .stop(true)
            .animate({ opacity: 0, top: "-100px" }, 200);
          $(".main")
            .stop(true)
            .animate({ marginTop: -wHeight * 2 - wHeight * 0.065 * 3 }, 1500);
          $(".third_action")
            .stop(true)
            .animate({ opacity: 1, top: "0px" }, 1200);
          break;
        case 4:
          $(".main")
            .stop(true)
            .animate({ marginTop: -wHeight * 2.74 }, 2000);
          $(".third_action")
            .stop(true)
            .animate({ opacity: 0, top: "-200px" }, 1200);
          break;
        default:
      }
    });
    // console.log($('.firstMain').html());
  }
  submit() {
    if (!$(".name").val()) {
      $(".nameError").show();
    }else if (!$(".pass").val()) {
      $(".nameError").hide();
      $(".passError").show();
    } else {
      $(".nameError").hide();
      $.ajax({
        method: "post",
        url: "http://10.31.160.71:3000/users/login",
        data: {
          name: $(".name").val(),
          password: md5($(".pass").val()).toString()
        }
      }).then(res => {
        if (res) {
          this.props.login(res.name);
          setcookie('name',res.name,7);
          $(location).prop('href','http://localhost:8080/#/product')
        } else {
          $(".passError")
            .show()
            .html("Account password is wrong");
        }
       
      });
    }
  }
  componentWillUnmount() {
    $(window).off();
  }
  render() {
    var btn = {
      width: 197,
      height: 32,
      fontSize: "11px",
      font: "Explore BYTON Concept"
    };
    var btn2 = {
      width: 197,
      height: 32,
      fontSize: "11px",
      font: "Experience"
    };
    var btn3 = {
      width: 250,
      height: 32,
      fontSize: "14px",
      font: "login"
    };
    return (
      <div className="main">
        <div className="firstMain">
          <div className="first_action">
            <h2 className="firstMain-h">Introducing BYTON Concept</h2>
            <h2 className="firstMain-h1"> Your new smart device</h2>
            <br />
            <br />
            <span className="firstMain-span">
              {" "}
              <i>Watch the concept reveal</i>
              <Button {...btn} />
            </span>
            <span className="firstMain-span" />
          </div>
        </div>
        <div className="secondMain">
          <div className="second_action">
            <div className="photoShow">
              <Phone />
            </div>
            <br />
            <br />
            
          </div>
        </div>
        <div className="thiredMain">
          <div className="third_action">
            <div className="zz" />
            <div className="thiredMain-left">
              <div className="thiredMain-left-right">
                <h3 className="thiredMain-left-right-h">
                  {" "}
                  <p>GET THE LATEST NEWS</p>
                </h3>
                <p className="thiredMain-left-right-p">
                  Sign up and receive the latest news about{" "}
                </p>
                <p className="thiredMain-left-right-p">
                  our company and our next-generation{" "}
                </p>
                <p className="thiredMain-left-right-p">smart device.</p>

                <form>
                  <input className="name" type="text" placeholder="firstname" />
                  <span className="nameError">Place input your name</span>
                  <br />
                  <input
                    className="pass"
                    type="password"
                    placeholder="password"
                  />
                  <span className="passError">Place input your password</span>
                  <br />
                  <div className="submit" onClick={this.submit.bind(this)}>
                    <Button {...btn3} />
                  </div>
                </form>
              </div>
            </div>
            <div className="thiredMain-right">
              <div className="thiredMain-right-left">
                <h3>
                  <p>DOWNLOAD OUR APP</p>
                </h3>
                <h4>Visualize. Discover. Reserve </h4>
                <p>Gather insights about BYTON and interact with us,</p>
                <p> use the visualizer to discover</p>
                <p> BYTON Concept and reserve your BYTON</p>
                <p>
                  {" "}
                  <span>before anyone else</span>
                </p>
                <img src="./img/app-store-badge@2x.png" />
                <img src="./img/google-play-badge@2x.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    name: state.name,
    tologin: state.tologin
  };
};
export default connect(mapStateToProps, { login, toLogin })(Main);
